<template>
    <div class="personalSetting">
        <div class="top">
            <div class="avatar">
                <img src="http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83epcWeEsu7iaYCu4QHI3EBicibRl75UquZp2GnD5ygBt4xlJG6KNb6XRZCRVviaA76nHBg5h44KRzPyfkw/132">
            </div>
            <h1 class="name">{{teacher.name}}</h1>
            <div class="header">
                <div class="h-nav">
                    <a>个人资料</a>
                </div>
            </div>
        </div>
        <div class="setting-page">
            <div class="item-change">
                <div class="setting-item">
                    <div class="options basic">
                        <h3 class="title">基本资料</h3>
                        <ul>
                            <li>
                                <p>姓名：</p>
                                <div class="edit-box">
                                    <span v-if="editBasic">{{teacher.name}}</span>
                                    <input type="text" v-model="newTeacher.name" class="txts" placeholder="请输入姓名" v-else>
                                </div>
                                <a @click="editBasic = false" class="edit-btn btn" v-if="editBasic" style="margin-left: 1000px">编辑资料</a>
                                <a @click="editBasic = true" class="exit-edit btn" style="margin-left: 1000px" v-else>放弃编辑</a>
                            </li>
                            <li>
                                <p>学校：</p>
                                <div class="edit-box">
                                    <span v-if="editBasic">{{teacher.school}}</span>
                                    <input type="text" v-model="newTeacher.school" class="txts" placeholder="请输入学校" v-else>
                                </div>
                            </li>
                        </ul>
                        <a @click="editTeacher()" class="save-btn" v-if="!editBasic">保存</a>
                    </div>
                    <div class="options account">
                        <h3 class="title">账号设置</h3>
                        <ul v-if="editEmail && editPhone">
                            <li>
                                <p>账号：</p>
                                <div class="edit-box">
                                    <span>{{teacher.username}}</span>
                                </div>
                            </li>
                            <li>
                                <p>邮箱：</p>
                                <div class="edit-box">
                                    <span v-if="teacher.email === null">未绑定</span>
                                    <span v-else>{{teacher.email}}</span>
                                </div>
                                <a @click="editEmail = false" class="edit-btn change-mail blue" v-if="teacher.email == null">绑定</a>
                                <a @click="editEmail = false" class="edit-btn change-mail blue btn" v-else>修改</a>
                            </li>
                            <li>
                                <p>手机：</p>
                                <div class="edit-box">
                                    <span v-if="teacher.phone == null">未绑定</span>
                                    <span v-else>{{teacher.phone}}</span>
                                </div>
                                <a @click="editPhone = false" class="edit-btn change-mobile" v-if="teacher.phone == null">绑定</a>
                                <a @click="editPhone = false" class="edit-btn change-mobile btn" v-else>修改</a>
                            </li>
                        </ul>
                        <div class="mail" v-if="!editEmail">
                            <ul>
                                <li>
                                    <p>当前邮箱：</p>
                                    <div class="edit-box">
                                        <span v-if="teacher.email == null">未绑定</span>
                                        <span v-else>{{teacher.email}}</span>
                                    </div>
                                    <a @click="editEmail = true" class="exit-edit btn" style="margin-left: 900px">放弃编辑</a>
                                </li>
                                <li>
                                    <p>&nbsp;&nbsp;&nbsp;新邮箱：</p>
                                    <div class="edit-box">
                                        <input type="text" v-model="newTeacher.email" class="txts" placeholder="请输入新邮箱">
                                    </div>
                                </li>
                            </ul>
                            <a @click="editTeacher()" class="save-btn">保存</a>
                        </div>
                        <div class="mobile" v-if="!editPhone">
                            <ul>
                                <li>
                                    <p>当前手机：</p>
                                    <div class="edit-box">
                                        <span v-if="teacher.phone === null">未绑定</span>
                                        <span v-else>{{teacher.phone}}</span>
                                    </div>
                                    <a @click="editPhone = true" class="exit-edit btn" v-if="editPhone = true">放弃编辑</a>
                                </li>
                                <li>
                                    <p>&nbsp;&nbsp;&nbsp;新手机：</p>
                                    <div class="edit-box">
                                        <input type="text" v-model="newTeacher.phone" class="txts" placeholder="请输入手机号码">
                                    </div>
                                </li>
                            </ul>
                            <a @click="editTeacher()" class="save-btn">保存</a>
                        </div>
                    </div>
                    <div class="options pass">
                        <h3 class="title">密码</h3>
                        <ul v-if="editPassword">
                            <li>
                                <p>密码：</p>
                                <div class="edit-box">
                                    <span>********</span>
                                </div>
                                <a @click="editPassword = false" class="edit-btn btn">更换密码</a>
                            </li>
                        </ul>
                        <div class="password" v-else>
                            <ul>
                                <li>
                                    <p>&nbsp;&nbsp;&nbsp;新密码：</p>
                                    <div class="edit-box">
                                        <input type="password" v-model="newPwd" class="txts" placeholder="请输入新密码">
                                    </div>
                                    <a @click="editPassword = true" class="exit-edit btn">放弃更改</a>
                                </li>
                                <li>
                                    <p>确认密码：</p>
                                    <div class="edit-box">
                                        <input @blur="isError()" type="password" v-model="newPwdAgain" class="txts" placeholder="确认密码">
                                        <span v-if="error" style="color: red"><i class="el-icon-error" type="warning" />两次输入密码不正确</span>
                                    </div>
                                </li>
                            </ul>
                            <a href="javascript:;" class="save-btn">保存</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTeacherInfo } from '../../api/require'

export default {
  data () {
    return {
      userName: '',
      student: {},
      newTeacher: {},
      editBasic: true,
      editEmail: true,
      editPhone: true,
      editPassword: true,
      newPwd: '',
      newPwdAgain: '',
      error: false,
      tid: '',
      teacher: {}
    }
  },
  methods: {
    isError () {
      this.error = this.newPwd !== this.newPwdAgain
    },
    editTeacher () {
      console.log(this.newTeacher)




    },
    getCookie (name) { // 获取指定名称的cookie值
    }
  },
  created () {
    this.tid = this.$route.query.tid
    getTeacherInfo(this.tid).then(res => {
      console.log(res)
      this.teacher = res.data.obj
      this.name = this.teacher.name
    })
  }
}
</script>

<style scoped>
    a {
        text-decoration: none;
    }
    li {
        list-style: none;
    }
    .personalSetting {
        font-size: 14px;
        font-family: 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;
        background: #fff;
        color: #2d2d2d;
    }
    .top {
        height: 250px;
        background-color: #fff;
        text-align: center;
        overflow: hidden;
    }
    .avatar {
        width: 115px;
        margin: 45px auto 0;
        background-color: #fff;
    }
    .avatar img {
        display: block;
        margin: 0 auto;
        height: 73px;
        width: 73px;
        border-radius: 50%;
    }
    .name {
        padding: 43px 0 10px;
        font-size: 28px;
        font-weight: 700;
        margin-top: -30px;
        line-height: 34px;
        height: 34px;
    }
    .header {
        height: 60px;
        margin-top: 15px;
        border-top: 1px solid #dcdcdc;
    }
    .header div {
        font-size: 0;
        text-align: center;
    }
    .header div a {
        font-size: 14px;
        line-height: 60px;
        color: #4D90FE;
    }
    .setting-page {
        margin-bottom: 60px;
        border: 1px solid #c8c8c8;
        padding-bottom: 60px;
        background: #FFF;
    }
    .btn{
      margin-left: 1000px;
    }
    .item-change {
        min-height: 550px;
    }
    .item-change .setting-item {
        padding: 20px 120px 0;
    }
    .setting-item .options {
        margin-top: 20px;
    }
    .item-change .setting-item .options .title {
        font-size: 14px;
        color: #333;
        text-align: left;
        border-bottom: 1px solid #DCDCDC;
        padding-bottom: 10px;
        line-height: 1;
    }
    .item-change .setting-item .options ul {
        position: relative;
        padding-top: 10px;
    }
    .item-change .setting-item .options ul li {
        height: 32px;
        margin-top: 10px;
      display: flex;
      justify-content: left;
      align-items: center;
    }
    .item-change .setting-item .options ul li p {
        float: left;
        min-width: 75px;
        line-height: 32px;
        color: #969696;
      display: flex;
      /*justify-content: left;*/
    }
    .item-change .setting-item .options ul li .edit-box {
        float: left;
        position: relative;
    }
    .item-change .setting-item .options ul li .edit-box span {
        display: inline-block;
        line-height: 32px;
        color: #595959;
    }
    .item-change .setting-item .options ul li .edit-box font {
        line-height: 32px;
        float: left;
    }
    .item-change .setting-item .options ul li>a {
        float: right;
        min-width: 56px;
        height: 22px;
        text-align: center;
        line-height: 22px;
        font-size: 12px;
        border-radius: 3px;
        margin-top: 3px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .item-change .setting-item .options ul li .edit-btn {
        color: #818181;
        border: 1px solid #c8c8c8;
    }
    .item-change .setting-item .options ul li .edit-btn:hover {
        background: #e6e6e6;
        color: #2D2D2D;
    }
    .item-change .setting-item .options ul li .exit-edit {
        color: #4d90fe;
        border: 1px solid #4d90fe;
    }
    .item-change .setting-item .options ul li .exit-edit:hover {
        background: #4d90fe;
        color: #FFF;
    }
    .item-change .setting-item .options ul li .edit-box .txts {
        width: 172px;
        height: 30px;
        line-height: 30px\9;
        border: 1px solid #c8c8c8;
        color: #595959;
        padding: 0 14px;
        border-radius: 3px;
        font-size: 14px;
    }
    .item-change .setting-item .options .save-btn {
        display: block;
        margin-left: 75px;
        width: 56px;
        height: 26px;
        border-radius: 3px;
        background: #4d90fe;
        color: #FFF;
        text-align: center;
        line-height: 26px;
        margin-top: 10px;
    }
</style>
